<style lang="scss" scoped>
:deep(textarea) {
  max-height: 200px !important;
  overflow-y: scroll;
}
</style>

<template>
  <div class="root-flex-page">
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="router.push({ name: 'index' })"
    >
      <template #title>
        <p style="-webkit-app-region: drag">匿名留言</p>
      </template>
    </van-nav-bar>
    <van-cell-group inset>
      <van-field
        v-model="message"
        rows="4"
        autosize
        label="留言"
        type="textarea"
        maxlength="100"
        placeholder="请输入留言"
        show-word-limit
      />
    </van-cell-group>
    <div class="px-4 text-right">
      <button class="btn-primary btn-sm btn" @click="submit">提交</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { addMessage } from '~/api/message'

const router = useRouter()
const message = ref()

async function submit() {
  await addMessage(message.value)
  message.value = ''
  showSuccessToast('留言成功')
}
</script>
